import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.12

Rectangle {
    id: loginPage
    anchors.fill: parent
    color: "#f5f7fa"
    
    // 信号定义
    signal loginSuccess()
    signal switchToRegister()
    
    // 属性
    property bool isLoading: false
    property string statusMessage: ""
    property string statusColor: "#e74c3c"
    
    // 组件初始化
    Component.onCompleted: {
        console.log("LoginPage: Component completed, authManager available:", typeof authManager !== 'undefined')
        if (typeof authManager !== 'undefined') {
            console.log("LoginPage: authManager is available, isLoggedIn:", authManager.isLoggedIn)
        }
    }
    
    // 连接AuthManager信号
    Connections {
        target: authManager
        
        onLoginSuccess: {
            console.log("LoginPage: Received AuthManager loginSuccess signal:", message)
            loginPage.isLoading = false
            loginPage.statusMessage = message
            loginPage.statusColor = "#27ae60"
            statusTimer.start()
            loginSuccessTimer.start()
        }
        
        onLoginFailed: {
            console.log("LoginPage: Received AuthManager loginFailed signal:", error)
            loginPage.isLoading = false
            loginPage.statusMessage = error
            loginPage.statusColor = "#e74c3c"
            statusTimer.start()
        }
    }
    
    // 状态消息定时器
    Timer {
        id: statusTimer
        interval: 3000
        onTriggered: loginPage.statusMessage = ""
    }
    
    // 登录成功延迟跳转定时器
    Timer {
        id: loginSuccessTimer
        interval: 1000
        onTriggered: {
            console.log("LoginPage: Emitting loginSuccess signal")
            loginPage.loginSuccess()
        }
    }
    
    // 背景装饰
    Rectangle {
        anchors.fill: parent
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#667eea" }
            GradientStop { position: 1.0; color: "#764ba2" }
        }
    }
    
    // 几何装饰元素
    Item {
        anchors.fill: parent
        
        // 装饰圆圈1
        Rectangle {
            width: 200
            height: 200
            radius: 100
            color: "#ffffff20"
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.rightMargin: -50
            anchors.topMargin: -50
        }
        
        // 装饰圆圈2
        Rectangle {
            width: 150
            height: 150
            radius: 75
            color: "#ffffff15"
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            anchors.leftMargin: -30
            anchors.bottomMargin: -30
        }
    }
    
    // 主登录卡片
    Rectangle {
        id: loginCard
        width: 400
        height: 520
        anchors.centerIn: parent
        color: "white"
        radius: 20
        
        layer.enabled: true
        layer.effect: DropShadow {
            horizontalOffset: 0
            verticalOffset: 8
            radius: 20
            samples: 40
            color: "#40000000"
        }
        
        ColumnLayout {
            anchors.fill: parent
            anchors.margins: 40
            spacing: 25
            
            // 系统标题
            ColumnLayout {
                Layout.alignment: Qt.AlignHCenter
                spacing: 10
                
                // Logo占位
                Rectangle {
                    width: 80
                    height: 80
                    radius: 40
                    color: "#667eea"
                    Layout.alignment: Qt.AlignHCenter
                    
                    Text {
                        anchors.centerIn: parent
                        text: "🌾"
                        font.pixelSize: 40
                        color: "white"
                    }
                }
                
                Text {
                    text: "甘蔗农机智能管控平台"
                    font.pixelSize: 24
                    font.bold: true
                    color: "#2c3e50"
                    Layout.alignment: Qt.AlignHCenter
                }
                
                Text {
                    text: "登录您的账户"
                    font.pixelSize: 14
                    color: "#7f8c8d"
                    Layout.alignment: Qt.AlignHCenter
                }
            }
            
            // 登录表单
            ColumnLayout {
                Layout.fillWidth: true
                spacing: 20
                
                // 用户名输入
                ColumnLayout {
                    Layout.fillWidth: true
                    spacing: 5
                    
                    Text {
                        text: "用户名"
                        font.pixelSize: 14
                        color: "#34495e"
                        font.bold: true
                    }
                    
                    Rectangle {
                        Layout.fillWidth: true
                        height: 50
                        color: "#f8f9fa"
                        border.color: usernameField.activeFocus ? "#667eea" : "#e9ecef"
                        border.width: 2
                        radius: 8
                        
                        RowLayout {
                            anchors.fill: parent
                            anchors.margins: 15
                            spacing: 10
                            
                            Text {
                                text: "👤"
                                font.pixelSize: 16
                                color: "#7f8c8d"
                            }
                            
                            TextField {
                                id: usernameField
                                Layout.fillWidth: true
                                placeholderText: "请输入用户名"
                                font.pixelSize: 14
                                color: "#2c3e50"
                                background: Rectangle { color: "transparent" }
                                selectByMouse: true
                                
                                Keys.onReturnPressed: passwordField.focus = true
                            }
                        }
                    }
                }
                
                // 密码输入
                ColumnLayout {
                    Layout.fillWidth: true
                    spacing: 5
                    
                    Text {
                        text: "密码"
                        font.pixelSize: 14
                        color: "#34495e"
                        font.bold: true
                    }
                    
                    Rectangle {
                        Layout.fillWidth: true
                        height: 50
                        color: "#f8f9fa"
                        border.color: passwordField.activeFocus ? "#667eea" : "#e9ecef"
                        border.width: 2
                        radius: 8
                        
                        RowLayout {
                            anchors.fill: parent
                            anchors.margins: 15
                            spacing: 10
                            
                            Text {
                                text: "🔒"
                                font.pixelSize: 16
                                color: "#7f8c8d"
                            }
                            
                            TextField {
                                id: passwordField
                                Layout.fillWidth: true
                                placeholderText: "请输入密码"
                                font.pixelSize: 14
                                color: "#2c3e50"
                                echoMode: showPasswordButton.checked ? TextInput.Normal : TextInput.Password
                                background: Rectangle { color: "transparent" }
                                selectByMouse: true
                                
                                Keys.onReturnPressed: performLogin()
                            }
                            
                            Button {
                                id: showPasswordButton
                                width: 30
                                height: 30
                                checkable: true
                                background: Rectangle { color: "transparent" }
                                
                                contentItem: Text {
                                    text: showPasswordButton.checked ? "👁️" : "🙈"
                                    font.pixelSize: 14
                                    color: "#7f8c8d"
                                    horizontalAlignment: Text.AlignHCenter
                                    verticalAlignment: Text.AlignVCenter
                                }
                            }
                        }
                    }
                }
                
                // 状态消息
                Text {
                    text: loginPage.statusMessage
                    font.pixelSize: 12
                    color: loginPage.statusColor
                    Layout.alignment: Qt.AlignHCenter
                    visible: loginPage.statusMessage !== ""
                    Layout.topMargin: -10
                }
                
                // 登录按钮
                Button {
                    id: loginButton
                    Layout.fillWidth: true
                    Layout.preferredHeight: 50
                    enabled: !loginPage.isLoading && usernameField.text.length > 0 && passwordField.text.length > 0
                    
                    background: Rectangle {
                        color: loginButton.enabled ? (loginButton.pressed ? "#5a67d8" : "#667eea") : "#bdc3c7"
                        radius: 8
                        
                        Behavior on color {
                            ColorAnimation { duration: 150 }
                        }
                    }
                    
                    contentItem: RowLayout {
                        anchors.centerIn: parent
                        spacing: 10
                        
                        // 加载动画
                        Rectangle {
                            visible: loginPage.isLoading
                            width: 20
                            height: 20
                            radius: 10
                            color: "transparent"
                            border.color: "white"
                            border.width: 2
                            
                            Rectangle {
                                width: 6
                                height: 6
                                radius: 3
                                color: "white"
                                anchors.top: parent.top
                                anchors.horizontalCenter: parent.horizontalCenter
                                anchors.topMargin: 2
                                
                                RotationAnimation on rotation {
                                    running: loginPage.isLoading
                                    from: 0
                                    to: 360
                                    duration: 1000
                                    loops: Animation.Infinite
                                }
                            }
                        }
                        
                        Text {
                            text: loginPage.isLoading ? "登录中..." : "登录"
                            font.pixelSize: 16
                            font.bold: true
                            color: "white"
                        }
                    }
                    
                    onClicked: performLogin()
                }
                
                // 分割线
                RowLayout {
                    Layout.fillWidth: true
                    Layout.topMargin: 10
                    
                    Rectangle {
                        Layout.fillWidth: true
                        height: 1
                        color: "#e9ecef"
                    }
                    
                    Text {
                        text: "或"
                        font.pixelSize: 12
                        color: "#7f8c8d"
                        Layout.leftMargin: 15
                        Layout.rightMargin: 15
                    }
                    
                    Rectangle {
                        Layout.fillWidth: true
                        height: 1
                        color: "#e9ecef"
                    }
                }
                
                // 注册链接
                Button {
                    Layout.alignment: Qt.AlignHCenter
                    Layout.topMargin: 10
                    
                    background: Rectangle { color: "transparent" }
                    hoverEnabled: true
                    
                    contentItem: Text {
                        id: registerLinkText
                        text: "还没有账户？立即注册"
                        font.pixelSize: 14
                        color: "#667eea"
                        horizontalAlignment: Text.AlignHCenter
                    }
                    
                    onHoveredChanged: {
                        registerLinkText.color = hovered ? "#5a67d8" : "#667eea"
                    }
                    
                    onClicked: {
                        console.log("注册链接被点击")
                        loginPage.switchToRegister()
                    }
                }
            }
        }
    }
    
    // 执行登录逻辑
    function performLogin() {
        console.log("LoginPage: performLogin called")
        if (usernameField.text.trim() === "" || passwordField.text.trim() === "") {
            loginPage.statusMessage = "请填写完整的登录信息"
            loginPage.statusColor = "#e74c3c"
            statusTimer.start()
            return
        }
        
        console.log("LoginPage: Calling authManager.loginUser with username:", usernameField.text.trim())
        loginPage.isLoading = true
        loginPage.statusMessage = ""
        
        // 调用AuthManager的登录方法
        authManager.loginUser(usernameField.text.trim(), passwordField.text)
    }
    
    // 清空表单
    function clearForm() {
        usernameField.text = ""
        passwordField.text = ""
        loginPage.statusMessage = ""
        loginPage.isLoading = false
    }
}
